<script lang="ts" setup>
import QRCode from 'qrcode';
import { getCurrentInstance, navigateTo } from '@tarojs/taro';
import { onMounted, reactive } from 'vue';
import { QUERY_DETAIL_BY_BATCH_NO } from '/@/api/modules/visitor/visitor-appointment-record';
import { VisitorPermitV2State } from './index.d';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  code: string;
};

const state = reactive<VisitorPermitV2State>({
  authMsg: '访客通行码验证中...',
  visitorAppointmentDto: {},
  visitorList: [],
  activeVisitorIndex: 0,
});

onMounted(() => {
  if (!params.code) {
    state.authMsg = '访客通行码未知！';
  } else {
    QUERY_DETAIL_BY_BATCH_NO({
      visitorAppointmentBatchNo: params.code,
    }).then((res) => {
      state.visitorAppointmentDto = res.visitorAppointmentDto;
      state.visitorList = res.content.map((v) => {
        return {
          ...v,
          qrCodeUrl: '',
        };
      });
      state.visitorList.forEach((v) => {
        QRCode.toDataURL(v.qrcode).then((url: string) => {
          v.qrCodeUrl = url;
        });
      });
    });
  }
});

/**
 * 跳转详情页面
 */
function detail() {
  navigateTo({
    url: `/pages/visitor/appointment-detail-open/index?id=${state.visitorAppointmentDto.id}&auditStatus=${state.visitorAppointmentDto.auditStatus}`,
  });
}
</script>

<template>
  <view class="visitor-permit-v2 app-page--1">
    <view
      v-if="!state.visitorList || !state.visitorList.length"
      class="visitor-permit-v2__auth-msg-wrapper"
    >
      {{ state.authMsg }}
    </view>
    <scroll-view v-else class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-permit-v2__wrapper">
        <view class="visitor-permit-v2__card">
          <view class="visitor-permit-v2__card--header">
            <view>{{ state.visitorList[state.activeVisitorIndex].orgName || '-' }}</view>
            <view class="visitor-permit-v2__address">
              {{ state.visitorList[state.activeVisitorIndex].address || '-' }}
            </view>
          </view>
          <view class="visitor-permit-v2__card--body">
            <view class="visitor-permit-v2__card--hr"></view>
            <view class="visitor-permit-v2__name">
              <text>尊敬的</text>
              <text>{{ state.visitorList[state.activeVisitorIndex].personName }}</text>
            </view>
            <swiper
              :indicator-dots="false"
              indicator-active-color="#fff"
              :current="state.activeVisitorIndex"
              :autoplay="false"
              class="visitor-permit-v2__swiper"
              @change="
                ({ detail }) => {
                  state.activeVisitorIndex = detail.current;
                }
              "
            >
              <swiper-item
                v-for="item in state.visitorList"
                :key="item.id"
                class="visitor-permit-v2__swiper-item"
              >
                <image
                  class="visitor-permit-v2__qr-code-img"
                  :src="state.visitorList[state.activeVisitorIndex].qrCodeUrl"
                />
              </swiper-item>
            </swiper>
            <view class="visitor-permit-v2__visitor-code">
              验证码:&nbsp;&nbsp;{{
                state.visitorList[state.activeVisitorIndex].visitorCode || '-'
              }}
            </view>

            <view class="visitor-permit-v2__swiper-utils-wrapper">
              <view
                class="visitor-permit-v2__swiper-utils-btn"
                @click="
                  () => {
                    if (state.activeVisitorIndex === 0) {
                      state.activeVisitorIndex = state.visitorList.length - 1;
                      return;
                    }

                    state.activeVisitorIndex -= 1;
                  }
                "
                >上一页</view
              >
              <view class="visitor-permit-v2__swiper-utils-number">
                {{ state.activeVisitorIndex + 1 }} / {{ state.visitorList.length }}
              </view>
              <view
                class="visitor-permit-v2__swiper-utils-btn"
                @click="
                  () => {
                    if (state.activeVisitorIndex === state.visitorList.length - 1) {
                      state.activeVisitorIndex = 0;
                      return;
                    }

                    state.activeVisitorIndex += 1;
                  }
                "
                >下一页</view
              >
            </view>
          </view>
        </view>
        <nut-button plain type="info" @click="detail()" class="visitor-permit-v2__btn"
          >点击查看访客详情</nut-button
        >
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
